/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-16 08:56:19
 * @LastEditTime : 2023-08-24 15:18:25
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Templates\ThrFou.jsx
 * @Description  :
 */
import { ProjectListTem } from '../Template'
import { useEventEmitter, useRequest } from 'ahooks'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { Player, BigPlayButton } from 'video-react'
import { useState } from 'react'
import { Select } from 'antd'
import { Http } from '../../../../Common/Api'
import { useEffect } from 'react'

const ProjectUuid = '21f196ef3-98f5-4e1a-a1e7-18f3d7fad4a'
const OrgType = 0

export const ThrFou = () => {
    const [Url, setUrl] = useState('')
    const [TimData, setTimData] = useState([])
    const [NumData, setNumData] = useState([])
    const [OrgSelect, setOrgSelect] = useState()
    const [TimSelect, setTimSelect] = useState()
    const [NumSelect, setNumSelect] = useState()

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        setOrgSelect(val)
    })

    const { runAsync: getVideoYearMonthList } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setTimSelect(null)
            setNumSelect(null)
            setUrl(null)
            const { list } = res
            if (list.length !== 0) {
                list.sort((a, b) => b.yearMonth.localeCompare(a.yearMonth))
                const time = list.map(({ yearMonth, rowsCount }) => ({
                    label: yearMonth,
                    value: yearMonth,
                    rowsCount,
                }))
                setTimData(time)
                let [{ value, rowsCount }] = time
                setTimSelect(value)
                NumberSelect(value, rowsCount)
            }
        },
    })

    const NumberSelect = (value, rowsCount) => {
        setNumSelect(null)
        setUrl(null)
        let number = []
        let NumberList = [...new Array(rowsCount).keys()]
        NumberList.forEach(item => {
            number = [...number, { label: item + 1 + '次', value: item + 1 }]
        })
        setNumData(number)
        setNumSelect(number[0].value)
        getVideosByConjunctiveQuery({
            url: 'getVideosByConjunctiveQuery',
            data: {
                ProjectUuid,
                OrganizationUuid: OrgSelect,
                OrgType,
                YearMonth: value,
                Number: number[0].value,
            },
        })
    }

    const { runAsync: getVideosByConjunctiveQuery } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setUrl(null)
            setUrl(res.list[0].fileUrl)
        },
    })

    const TimChange = (e, option) => {
        setTimSelect(e)
        NumberSelect(e, option.rowsCount)
    }

    const NumChange = e => {
        setNumSelect(e)
        getVideosByConjunctiveQuery({
            url: 'getVideosByConjunctiveQuery',
            data: {
                ProjectUuid,
                OrganizationUuid: OrgSelect,
                OrgType,
                YearMonth: TimSelect,
                Number: e,
            },
        })
    }

    useEffect(() => {
        setUrl('')
        setTimData([])
        setNumData([])
        if (OrgSelect) {
            console.log('OrgSelect', OrgSelect)
            getVideoYearMonthList({
                url: 'getVideoYearMonthList',
                data: { ProjectUuid, OrganizationUuid: OrgSelect, OrgType },
            })
        }
    }, [getVideoYearMonthList, OrgSelect])

    return (
        <>
            <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            <CommonSmallTitle title="无人机航拍" flex={1246}>
                <div className="one">
                    <div className="Select">
                        <div>
                            <div>日期 : </div>
                            <Select placeholder="请选择时间" options={TimData} value={TimSelect} onChange={TimChange} />
                        </div>
                        <div>
                            <div>次数 : </div>
                            <Select placeholder="请选择次数" options={NumData} value={NumSelect} onChange={NumChange} />
                        </div>
                    </div>
                    <div className="Video">
                        <Player fluid={false} height={'100%'} muted src={Url}>
                            <BigPlayButton position="center" />
                        </Player>
                    </div>
                </div>
            </CommonSmallTitle>
        </>
    )
}
